<template>
    <h2>调拨添加</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form.addDto" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <table style="width: 100%; border: 1px solid #ccc">
            <tr>
                <td colspan="3" style="background-color: grey">
                    <h3 style="color: aliceblue">基本信息</h3>
                    <hr />
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="单据主题" prop="vendorId">
                        <el-input v-model="form.updDto.aName" style="width: 300px" :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="单据编号" prop="vendorId">
                        <el-input v-model="form.updDto.aNumber" placeholder="保存后自动生成" style="width: 300px"
                            :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="调拨日期" required>
                        <el-col :span="11">
                            <el-form-item prop="4">
                                <el-date-picker v-model="form.updDto.aDate" type="date" aria-label="Pick a date"
                                    placeholder="Pick a date" style="width: 500px" :disabled="true" />
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="库管人员" prop="vendorId">
                        <el-input v-model="form.updDto.aWarehousePersonnel" style="width: 300px" placeholder="双击选择库管人员"
                            @dblclick="dialogVisible2 = true; GetSectorList()" :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="调出仓库" prop="vendorId">
                        <el-input v-model="form.updDto.aGoWarehouse" placeholder="双击选择仓库" style="width: 300px"
                            @dblclick="dialogVisibleckchu = true" :disabled="true" />
                    </el-form-item>
                </td>
                <td></td>
            </tr>
        </table>
        <br />

        <!-- 产品表格 -->
        <table border="1" style="border-collapse: collapse; width: 1000px; height: 40px;">
            <thead>
                <tr>
                    <th><input type="checkbox" style="width: 30px;" />
                    </th>
                    <th style="height: 40px;">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>现有库存</th>
                    <th>调拨数量</th>
                    <th>调出仓库</th>
                    <th>调入仓库</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in check" :key="index">
                    <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu"
                            :disabled="true" /></td>
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                    <td>
                        <input v-model="item.pName" type="text" placeholder="双击选择产品"
                            style="height: 40px; width: 150px;text-align: center;" @dblclick="dialogVisible = true"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pNumber" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pSpec" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pUnit" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.spConfirmNum" type="text"
                            style="height: 40px; width: 150px;text-align: center;" @change="sumRPNum"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.apAllocateNum" type="text"
                            style="height: 40px; width: 150px;text-align: center;" :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.wName" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.apInboundWarehouse" type="text" placeholder="双击选择仓库"
                            style="height: 40px; width: 150px;text-align: center;" @dblclick="dialogVisibleck = true"
                            :disabled="true" />
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <el-form-item>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, reactive, computed } from "vue";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const locationOptions = ["Home", "Company", "School"];
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import http from '../../../http.js'
const dialogVisible = ref(false)
const dialogVisibleck = ref(false)
const dialogVisibleckchu = ref(false)
const dialogVisible2 = ref(false)
const route = useRoute();
const router = useRouter();
const form = reactive({
    "updDto": {
        "allocateId": route.query.id,
        "aName": "",
        "aNumber": "",
        "aDate": "",
        "aWarehousePersonnel": "",
        "aGoWarehouse": "",
        "warehouseId": '',
        "aRecallProduct": "",
        "productId": '',
        "aState": '',
        "addName": "",
        "addTime": "",
        "office_Id": "",
        "user_Id": '',
        "updName": "",
        "updTime": "",
        "upddto": [
            {
                "allocationProductsId": '',
                "aNumber": "",
                "apAllocateNum": '',
                "apInboundWarehouse": "",
                "pNumber": "",
                "pName": "",
                "pSpec": "",
                "pUnit": "",
                "wName": "",
                "addName": "",
                "addTime": "",
                "office_Id": "",
                "user_Id": '',
                "updName": "",
                "updTime": ""
            }
        ]
    }
})
//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({
        pName: '',//产品名称
        pNumber: "",//产品编号
        pSpec: "",//产品规格
        pUnit: "",//产品单位
        spConfirmNum: '',//现有库存
        wName: "",//调出仓库
        apInboundWarehouse: "",//调入仓库
        apAllocateNum: ""
    });
}
onMounted(() => {
    getColumnById();
})
const getColumnById = () => {
    axios.get(http.zblnb + '/erpck/api/Allocate/AllocateInfo?AllocateId=' + route.query.id).then((res) => {
        console.log(res.data.data)
        console.log(res.data.data.allocateId)
        form.updDto.allocateId = res.data.data.allocateId
        form.updDto.aName = res.data.data.aName
        form.updDto.aNumber = res.data.data.aNumber
        form.updDto.aDate = res.data.data.aDate
        form.updDto.aWarehousePersonnel = res.data.data.aWarehousePersonnel
        form.updDto.aGoWarehouse = res.data.data.aGoWarehouse
        form.updDto.warehouseId = res.data.data.warehouseId
        form.updDto.aRecallProduct = res.data.data.aRecallProduct
        form.updDto.productId = res.data.data.productId
        form.updDto.aState = res.data.data.aState
        form.updDto.addName = res.data.data.addName
        form.updDto.addTime = res.data.data.addTime
        form.updDto.office_Id = res.data.data.office_Id
        form.updDto.updName = res.data.data.updName
        form.updDto.updTime = res.data.data.updTime
        check.value = res.data.data.upddto;
    })
}
//取消
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    router.push('/ShowAllocate')
}
</script>